<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer data-platform-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="160px" :rules="editFormRules" ref="editForm">
          <h4 class="type-title">
            <div class="icon-box"><icon-svg name="iconBase"></icon-svg></div>
            <span>基本信息</span>
          </h4>
          <el-form-item label="数据平台名称" prop="plfmNm">
            <el-col :span="12">
              <el-input placeholder="请输入数据平台名称" v-model="editForm.plfmNm"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="数据平台描述" prop="plfmDesc">
            <el-col :span="18">
              <el-input
                type="textarea"
                placeholder="请输入数据平台描述"
                v-model="editForm.plfmDesc"
                :rows="3"
                resize="none"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="供数据工作站使用" prop="isDtsUse" class="linker-sql">
            <el-switch
              active-color="#13ce66"
              v-model="editForm.isDtsUse"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>

          <h4 class="type-title">
            <div class="icon-box"><icon-svg name="iconLinker"></icon-svg></div>
            <span>连接信息</span>
          </h4>

          <el-form-item label="数据库型号" prop="dbType">
            <el-col :span="12">
              <el-select v-model="editForm.dbType" placeholder="请选择数据库型号" @change="dbChange">
                <el-option
                  v-for="dict in $dictList('db_type')"
                  :key="dict.key"
                  :label="dict.value"
                  :value="dict.key"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="数据库版本号" prop="dbVer">
            <el-col :span="12">
              <el-select v-model="editForm.dbVer" placeholder="请选择数据库版本号">
                <el-option v-for="ver in dbVerList" :key="ver.key" :label="ver.value" :value="ver.key"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="IP" prop="hostIdList" class="user-form-item">
            <template v-for="(item, index) in editForm.hostIdList">
              <el-form-item
                label-width="0"
                :key="index"
                :prop="'hostIdList.' + index"
                :rules="{ required: true, message: '请输入IP地址', trigger: 'blur' }"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-input v-model="editForm.hostIdList[index]" placeholder="请输入IP地址"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      plain
                      circle
                      size="mini"
                      @click="addHost('hostIdList', index + 1)"
                    ></el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-minus"
                      plain
                      circle
                      size="mini"
                      @click="removeHost('hostIdList', index)"
                      v-if="index > 0"
                    ></el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </template>
          </el-form-item>

          <el-form-item label="用户" prop="loginUname">
            <el-col :span="12">
              <el-input placeholder="请输入用户" v-model="editForm.loginUname"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="密码" prop="loginPwd">
            <el-col :span="12">
              <el-input
                placeholder="请输入密码"
                show-password
                v-model="editForm.loginPwd"
                autocomplete="new-password"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item
            :label="editForm.dbType === 16 ? '数据库' : '数据库实例'"
            prop="dbInstName"
            v-if="
              editForm.dbType === 2 ||
                editForm.dbType === 3 ||
                editForm.dbType === 5 ||
                editForm.dbType === 6 ||
                editForm.dbType === 7 ||
                editForm.dbType === 8 ||
                editForm.dbType === 11 ||
                editForm.dbType === 16
            "
            :class="{
              'is-required':
                editForm.dbType === 2 || editForm.dbType === 3 || editForm.dbType === 7 || editForm.dbType === 16
            }"
          >
            <el-col :span="12">
              <el-input placeholder="请输入" v-model="editForm.dbInstName"></el-input>
            </el-col>
            <el-tooltip
              effect="dark"
              placement="right"
              content="数据库实例为空时将使用默认数据库postgres"
              :enterable="false"
              v-if="editForm.dbType === 8 || editForm.dbType === 11"
            >
              <i class="el-icon-info"></i>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="端口" prop="portNo">
            <el-col :span="12">
              <el-input placeholder="端口范围1-65535" v-model="editForm.portNo"></el-input>
            </el-col>
            <el-tooltip effect="dark" placement="right" :enterable="false">
              <div slot="content">
                端口为空时将根据数据库型号传入默认端口<br />
                DB2: 50000<br />
                GAUSSDB: 25308<br />
                Greenplum: 5432<br />
                Hive: 10000<br />
                Impala: 21050<br />
                Inceptor: 10000<br />
                MySql: 3306<br />
                Oracle: 1521<br />
                PostgreSQL: 5432<br />
                SQLServer: 1433<br />
                Sybase IQ: 2639<br />
                Teradata: 1025<br />
                Vertica: 5433
              </div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </el-form-item>

          <el-form-item :label="editForm.dbType === 16 ? '模式' : '数据库名称'" prop="dbName">
            <el-col :span="12">
              <el-input
                :placeholder="editForm.dbType === 16 ? '请输入模式' : '请输入数据库名称'"
                v-model="editForm.dbName"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="额外参数" v-if="editForm.othParameter.length === 0">
            <span class="params-button">
              <el-button
                type="primary"
                icon="el-icon-plus"
                plain
                circle
                @click="addParam(0, editForm.othParameter)"
              ></el-button>
            </span>
          </el-form-item>

          <template v-for="(item, index) in editForm.othParameter">
            <el-form-item
              :label="index === 0 ? '额外参数' : ''"
              :key="index"
              :prop="'othParameter.' + index"
              :rules="[{ validator: paramValidator, trigger: ['change', 'blur'] }]"
            >
              <el-col :span="8">
                <el-input placeholder="key" v-model="item.key"></el-input>
              </el-col>
              <el-col :span="1" class="params-text">
                <span>：</span>
              </el-col>
              <el-col :span="8">
                <el-input placeholder="value" v-model="item.value"></el-input>
              </el-col>
              <el-col :span="4" class="params-button">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  plain
                  circle
                  @click="addParam(index + 1, editForm.othParameter)"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-minus"
                  plain
                  circle
                  @click="removeParam(index, editForm.othParameter)"
                ></el-button>
              </el-col>
            </el-form-item>
          </template>

          <div v-if="editForm.dbType === 12 || editForm.dbType === 15" class="extend-database">
            <el-form-item label="拓展数据库" prop="isExtend">
              <el-col :span="12">
                <el-switch active-color="#13ce66" v-model="editForm.isExtend"> </el-switch>
              </el-col>
            </el-form-item>
            <template v-if="editForm.isExtend">
              <el-form-item label="拓展数据库型号" prop="extend.dbType">
                <el-col :span="12">
                  <el-select v-model="editForm.extend.dbType" placeholder="请选择数据库型号" @change="extendDbChange">
                    <el-option label="MYSQL" :value="4"></el-option>
                    <el-option label="ORACLE" :value="2"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>

              <el-form-item label="拓展数据库版本号" prop="extend.dbVer">
                <el-col :span="12">
                  <el-select v-model="editForm.extend.dbVer" placeholder="请选择数据库版本号">
                    <el-option
                      v-for="ver in extendDbVerList"
                      :key="ver.key"
                      :label="ver.value"
                      :value="ver.key"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-form-item>

              <el-form-item label="IP" prop="extend.hostIdList" class="user-form-item">
                <template v-for="(item, index) in editForm.extend.hostIdList">
                  <el-form-item
                    label-width="0"
                    :key="index"
                    :prop="'extend.hostIdList.' + index"
                    :rules="{ required: true, message: '请输入IP地址', trigger: 'blur' }"
                  >
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-input v-model="editForm.extend.hostIdList[index]" placeholder="请输入IP地址"></el-input>
                      </el-col>
                      <el-col :span="10">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          plain
                          circle
                          size="mini"
                          @click="addHost('extend.hostIdList', index + 1)"
                        ></el-button>
                        <el-button
                          type="primary"
                          icon="el-icon-minus"
                          plain
                          circle
                          size="mini"
                          @click="removeHost('extend.hostIdList', index)"
                          v-if="index > 0"
                        ></el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </template>
              </el-form-item>

              <el-form-item label="用户" prop="extend.loginUname">
                <el-col :span="12">
                  <el-input placeholder="请输入用户" v-model="editForm.extend.loginUname"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="密码" prop="extend.loginPwd">
                <el-col :span="12">
                  <el-input
                    placeholder="请输入密码"
                    show-password
                    v-model="editForm.extend.loginPwd"
                    autocomplete="new-password"
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item
                label="数据库实例"
                prop="extend.dbInstName"
                v-if="editForm.extend.dbType === 2"
                :class="{ 'is-required': editForm.extend.dbType === 2 }"
              >
                <el-col :span="12">
                  <el-input placeholder="请输入" v-model="editForm.extend.dbInstName"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="端口" prop="extend.portNo">
                <el-col :span="12">
                  <el-input placeholder="端口范围1-65535" v-model="editForm.extend.portNo"></el-input>
                </el-col>
                <el-tooltip effect="dark" placement="right" :enterable="false">
                  <div slot="content">
                    端口为空时将根据数据库型号传入默认端口<br />
                    MySql: 3306<br />
                    Oracle: 1521
                  </div>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </el-form-item>

              <el-form-item label="数据库名称" prop="extend.dbName">
                <el-col :span="12">
                  <el-input placeholder="请输入数据库名称" v-model="editForm.extend.dbName"></el-input>
                </el-col>
                <el-tooltip effect="dark" placement="right" content="默认使用metastore" :enterable="false">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </el-form-item>

              <el-form-item label="额外参数" v-if="editForm.extend.othParameter.length === 0">
                <span class="params-button">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    plain
                    circle
                    @click="addParam(0, editForm.extend.othParameter)"
                  ></el-button>
                </span>
              </el-form-item>

              <template v-for="(item, index) in editForm.extend.othParameter">
                <el-form-item
                  :label="index === 0 ? '额外参数' : ''"
                  :key="index"
                  :prop="'extend.othParameter.' + index"
                  :rules="[{ validator: paramValidator, trigger: ['change', 'blur'] }]"
                >
                  <el-col :span="8">
                    <el-input placeholder="key" v-model="item.key"></el-input>
                  </el-col>
                  <el-col :span="1" class="params-text">
                    <span>：</span>
                  </el-col>
                  <el-col :span="8">
                    <el-input placeholder="value" v-model="item.value"></el-input>
                  </el-col>
                  <el-col :span="4" class="params-button">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      plain
                      circle
                      @click="addParam(index + 1, editForm.extend.othParameter)"
                    ></el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-minus"
                      plain
                      circle
                      @click="removeParam(index, editForm.extend.othParameter)"
                    ></el-button>
                  </el-col>
                </el-form-item>
              </template>
            </template>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <div class="test-button" v-if="editForm.dbType !== 5">
        <el-button type="primary" :loading="loading" @click="test">测试连接</el-button>
        <i v-if="testStatus === 'loading'" class="el-icon-loading"></i>
        <i v-if="testStatus === 'success'" class="el-icon-circle-check-outline"></i>
        <i v-if="testStatus === 'faild'" class="el-icon-circle-close-outline"></i>
      </div>
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增数据平台',
        edit: '修改数据平台'
      },
      loading: false,
      testStatus: 'none',
      dbVerList: [],
      extendDbVerList: [],
      editForm: {
        plfmId: '',
        plfmNm: '',
        plfmDesc: '',
        isDtsUse: 1,
        dbType: '',
        dbVer: '',
        hostIdList: [''],
        loginUname: '',
        loginPwd: '',
        dbInstName: '',
        portNo: '',
        dbName: '',
        othParameter: [],
        isExtend: false,
        extend: {
          dbType: '',
          dbVer: '',
          hostIdList: [''],
          portNo: '',
          dbName: '',
          dbInstName: '',
          loginUname: '',
          loginPwd: '',
          othParameter: []
        }
      },
      editFormRules: {
        plfmNm: [
          { required: true, message: '数据平台名称不能为空', trigger: 'blur' },
          { max: 20, message: '数据平台名称不能超过20个字符', trigger: 'blur' }
        ],
        plfmDesc: [{ max: 500, message: '数据平台描述不能超过500个字符', trigger: 'blur' }],
        isDtsUse: [{ required: true, message: '请选择是否供数据工作站使用', trigger: 'change' }],
        dbType: [{ required: true, message: '请选择数据库型号', trigger: 'change' }],
        dbVer: [{ required: true, message: '请选择数据库版本号', trigger: 'change' }],
        loginUname: [{ max: 50, message: '用户不能超过50个字符', trigger: 'blur' }],
        loginPwd: [{ max: 100, message: '密码不能超过100个字符', trigger: 'blur' }],
        dbInstName: [
          { validator: this.dbInstValidator, trigger: 'blur' },
          { max: 50, message: '不能超过50个字符', trigger: 'blur' }
        ],
        portNo: [{ validator: this.portValidator, trigger: 'blur' }],
        dbName: [{ max: 50, message: '不能超过50个字符', trigger: 'blur' }],
        'extend.dbType': [{ required: true, message: '请选择数据库型号', trigger: 'change' }],
        'extend.dbVer': [{ required: true, message: '请选择数据库版本号', trigger: 'change' }],
        'extend.portNo': [{ validator: this.portValidator, trigger: 'blur' }],
        'extend.dbName': [{ max: 50, message: '不能超过50个字符', trigger: 'blur' }],
        'extend.dbInstName': [
          { validator: this.dbInstExtendValidator, trigger: 'blur' },
          { max: 50, message: '不能超过50个字符', trigger: 'blur' }
        ],
        'extend.loginUname': [{ max: 50, message: '用户不能超过50个字符', trigger: 'blur' }],
        'extend.loginPwd': [{ max: 100, message: '密码不能超过100个字符', trigger: 'blur' }]
      }
    }
  },
  methods: {
    showDrawer(type, data) {
      this.drawerType = type
      if (this.drawerType === 'edit') {
        this.editForm.plfmId = data.plfmId
        this.getDetail()
      }
      this.drawerVisible = true
    },
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl(`mta/mtaPlatform/getPlatformDetail/${this.editForm.plfmId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.plfmNm = data.data.plfmNm
          this.editForm.plfmDesc = data.data.plfmDesc
          this.editForm.isDtsUse = Number(data.data.isDtsUse)
          this.editForm.dbType = data.data.dbType
          if (this.editForm.dbType) this.getDbVerList()
          this.$nextTick(() => {
            this.editForm.dbVer = data.data.dbVer || ''
            this.editForm.hostIdList = data.data.hostIdList.length ? data.data.hostIdList.split(',') : ['']
            this.editForm.loginUname = data.data.loginUname
            this.editForm.loginPwd = data.data.loginPwd
            this.editForm.dbInstName = data.data.dbInstName
            this.editForm.portNo = data.data.portNo || ''
            this.editForm.dbName = data.data.dbName
            if (data.data.othParameter.length) {
              let arr = data.data.othParameter.split(',')
              this.editForm.othParameter = arr.map(item => {
                return { key: item.split('=')[0], value: item.split('=')[1] }
              })
            }
            if (data.data.extendConnector) {
              this.editForm.isExtend = true
              this.editForm.extend.dbType = data.data.extendConnector.dbType
              if (this.editForm.extend.dbType) this.getDbVerList(true)
              this.$nextTick(() => {
                this.editForm.extend.dbVer = data.data.extendConnector.dbVer || ''
                this.editForm.extend.hostIdList = data.data.extendConnector.hostIdLis.length
                  ? data.data.extendConnector.hostIdList.split(',')
                  : ['']
                this.editForm.extend.portNo = data.data.extendConnector.portNo || ''
                this.editForm.extend.dbName = data.data.extendConnector.dbName
                this.editForm.extend.dbInstName = data.data.extendConnector.dbInstName
                this.editForm.extend.loginUname = data.data.extendConnector.loginUname
                this.editForm.extend.loginPwd = data.data.extendConnector.loginPwd
                if (data.data.extendConnector.othParameter.length) {
                  let arr = data.data.extendConnector.othParameter.split(',')
                  this.editForm.extend.othParameter = arr.map(item => {
                    return { key: item.split('=')[0], value: item.split('=')[1] }
                  })
                }
              })
            }
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDbVerList(extend = false) {
      this.$ajax({
        url: this.$ajax.setUrl(
          'mta/mtaPlatform/listDbVer/' + (extend ? this.editForm.extend.dbType : this.editForm.dbType)
        ),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (extend) {
            this.extendDbVerList = data.data
          } else {
            this.dbVerList = data.data
          }
        } else {
          if (extend) {
            this.extendDbVerList = []
          } else {
            this.dbVerList = []
          }

          this.$message.error(data.data || data.msg)
        }
      })
    },
    dbInstValidator(rule, value, callback) {
      if (value === '') {
        if (this.editForm.dbType === 2 || this.editForm.dbType === 3 || this.editForm.dbType === 7) {
          callback(new Error('数据库实例不能为空'))
        } else if (this.editForm.dbType === 16) {
          callback(new Error('数据库不能为空'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    dbInstExtendValidator(rule, value, callback) {
      if (value === '') {
        if (this.editForm.extend.dbType === 2) {
          callback(new Error('数据库实例不能为空'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    portValidator(rule, value, callback) {
      if (value === '') {
        callback()
      } else {
        if (!/^[0-9]{0,5}$/.test(value) || value < 1 || value > 65535) {
          callback(new Error('端口必须为1-65535之间的整数'))
        } else {
          callback()
        }
      }
    },
    paramValidator(rule, value, callback) {
      if (value.key === '' || value.value === '') {
        callback(new Error('键值对必须填写完整'))
      } else {
        callback()
      }
    },
    addParam(index, arr) {
      arr.splice(index, 0, {
        key: '',
        value: ''
      })
    },
    removeParam(index, arr) {
      arr.splice(index, 1)
    },
    dbChange() {
      this.editForm.dbVer = ''
      this.getDbVerList()
      if (this.dialogType === 'add') {
        this.setRecommendParams(this.editForm.JDBC)
      }
    },
    extendDbChange() {
      this.editForm.extend.dbVer = ''
      this.getDbVerList(true)
      if (this.dialogType === 'add') {
        this.setRecommendParams(this.editForm.extend)
      }
    },
    getParams() {
      let othParameter = ''
      if (this.editForm.othParameter.length) {
        let paramsArray = this.editForm.othParameter.map(item => {
          return `${item.key}=${item.value}`
        })
        othParameter = paramsArray.join(',')
      }
      var params = {
        plfmNm: this.editForm.plfmNm,
        plfmDesc: this.editForm.plfmDesc,
        isDtsUse: this.editForm.isDtsUse,
        dbType: this.editForm.dbType,
        dbVer: this.editForm.dbVer,
        hostIdList: this.editForm.hostIdList.join(','),
        portNo: this.editForm.portNo ? Number(this.editForm.portNo) : undefined,
        dbName: this.editForm.dbName,
        dbInstName: '',
        loginUname: this.editForm.loginUname,
        loginPwd: this.editForm.loginPwd,
        othParameter: othParameter
      }
      if (
        this.editForm.dbType === 2 ||
        this.editForm.dbType === 3 ||
        this.editForm.dbType === 5 ||
        this.editForm.dbType === 6 ||
        this.editForm.dbType === 7 ||
        this.editForm.dbType === 8 ||
        this.editForm.dbType === 11 ||
        this.editForm.dbType === 16
      ) {
        params.dbInstName = this.editForm.dbInstName
      }
      if ((params.dbType === 12 || params.dbType === 15) && this.editForm.isExtend) {
        let expandOthers = ''
        if (this.editForm.extend.othParameter.length) {
          let expandParamsArray = this.editForm.extend.othParameter.map(item => {
            return `${item.key}=${item.value}`
          })
          expandOthers = expandParamsArray.join(',')
        }
        params.extendConnector = {
          isDtsUse: this.editForm.extend.isDtsUse,
          dbType: this.editForm.extend.dbType,
          dbVer: this.editForm.extend.dbVer,
          hostIdList: this.editForm.extend.hostIdList.join(','),
          portNo: this.editForm.extend.portNo ? Number(this.editForm.extend.portNo) : undefined,
          dbName: this.editForm.extend.dbName,
          dbInstName: '',
          loginUname: this.editForm.extend.loginUname,
          loginPwd: this.editForm.extend.loginPwd,
          othParameter: expandOthers
        }
        if (this.editForm.extend.dbType === 2) {
          params.extendConnector.dbInstName = this.editForm.extend.dbInstName
        }
      }
      if (this.drawerType === 'edit') {
        params.plfmId = this.editForm.plfmId
        if ((params.dbType === 12 || params.dbType === 15) && this.editForm.isExtend)
          params.extendConnector.connectorId = this.editForm.plfmId
      }
      return params
    },
    test() {
      if (this.testStatus === 'loading') return
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.testStatus = 'loading'
          var params = this.getParams()
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('mta/mtaPlatform/testJdbcConn'),
            method: 'post',
            data: this.$ajax.setData(params),
            timeout: 0
          })
            .then(({ data }) => {
              if (data && data.code === '0') {
                this.testStatus = 'success'
                this.$message.success(data.msg)
              } else {
                this.testStatus = 'faild'
                this.$message.error(data.data || data.msg)
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
              this.testStatus = 'faild'
              this.$message.error('请求发生了错误')
            })
        } else {
          this.$nextTick(() => {
            let form = this.$refs.editForm.$el
            let error = form.querySelector('.is-error')
            if (error) {
              form.parentNode.scrollTop = error.offsetTop - 70
            }
          })
        }
      })
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = this.getParams()
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl(this.drawerType === 'add' ? 'mta/mtaPlatform/save' : 'mta/mtaPlatform/update'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    addHost(field, index) {
      if (field.indexOf('.') < 0) this.editForm[field].splice(index, 0, '')
      else {
        const newField = field.split('.')
        this.editForm[newField[0]][newField[1]].splice(index, 0, '')
      }
    },
    removeHost(field, index) {
      if (field.indexOf('.') < 0) this.editForm[field].splice(index, 1)
      else {
        const newField = field.split('.')
        this.editForm[newField[0]][newField[1]].splice(index, 1)
      }
    },
    clearDialog() {
      this.editForm = {
        plfmId: '',
        plfmNm: '',
        plfmDesc: '',
        isDtsUse: 1,
        dbType: '',
        dbVer: '',
        hostIdList: [''],
        loginUname: '',
        loginPwd: '',
        dbInstName: '',
        portNo: '',
        dbName: '',
        othParameter: [],
        isExtend: false,
        extend: {
          dbType: '',
          dbVer: '',
          hostIdList: [''],
          portNo: '',
          dbName: '',
          dbInstName: '',
          loginUname: '',
          loginPwd: '',
          othParameter: []
        }
      }
      this.dbVerList = []
      this.extendDbVerList = []
      this.testStatus = 'none'
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.data-platform-drawer {
  .linker-sql {
    margin-top: -16px;
  }
  .extend-database {
    border: 1px dashed $border-color;
    padding-top: 20px;
  }
  .el-icon-info {
    margin-left: 10px;
    font-size: 16px;
    vertical-align: middle;
    color: #606266;
  }
  .test-button {
    float: left;
    margin-left: 20px;
    i {
      font-size: 24px;
      vertical-align: sub;
      margin-left: 10px;
    }
    .el-icon-circle-check-outline {
      color: $tag-green;
    }
    .el-icon-circle-close-outline {
      color: $tag-red;
    }
  }
  .params-text {
    text-align: center;
  }
  .params-button {
    min-height: 1px;
    line-height: 40px;
    text-align: center;
    .el-button.is-circle {
      padding: 5px;
      .icon-svg {
        font-size: 16px;
      }
    }
  }
  .user-form-item {
    margin-bottom: 0;
    & > .el-form-item__content {
      overflow: hidden;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
}
</style>
